<template>
  <div class="content-wrapper">
    <!-- <div class="content-header">分类代码</div> -->
    <div class="content-container">
      <el-form
        ref="listQueryForm"
        :inline="true"
        :model="listQuery"
        class="filter-container"
      >
        <el-form-item prop="dictGroupCode">
          <el-select
            v-model="listQuery.parentDictId"
            placeholder="请输入类组"
            class="filter-item"
            size="small"
            @change="handleDictGroupCodeChange"
          >
            <el-option
              v-for="item in dictOptions"
              :key="item.dictId"
              :label="item.dictValue"
              :value="item.dictId"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="list"
        highlight-current-row
        max-height="700"
      >
        <el-table-column label="节点" prop="dictValue" />
        <el-table-column label="默认处理人" prop="label">
          <template scope="{row}">
            <el-tag
              type="success"
              closable
              v-for="item in row.childrenList"
              :key="item.dictId"
              @close="deleteRow(item)"
              >{{ item.dictValue }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="{ row, $index }">
            <el-button type="text" size="mini" @click="handleUpdate(row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="90px"
        >
          <el-form-item label="节点" prop="dictValue">
            <el-input v-model.trim="temp.dictValue" disabled />
          </el-form-item>
          <el-form-item label="处理人" prop="name">
            <el-tag
              v-for="(tag, index) in temp.reviewName"
              :key="index"
              :disable-transitions="false"
              class="tag"
            >
              {{ tag.userName }}
            </el-tag>
            <el-button
              size="mini"
              round
              circle
              icon="el-icon-plus"
              @click="openReview(3)"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createData">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
    <SearchPersonnel
      :search-personnel-data="SearchPersonnelData"
      @dataListData="dataListData"
    />
    <!-- <SearchUserList
      :search-user-list-data="SearchUserListData"
      @SearchUserList="SearchUserList"
    /> -->
  </div>
</template>

<script>
import { listDict, listDictItem, saveDict, deleteDict } from '@/api/base/dict'
import waves from '@/directive/waves'
import SearchPersonnel from '@/components/SearchUser/SearchPersonnel.vue'
// import SearchUserList from '@/components/SearchUserList/index'

export default {
  components: {
    SearchPersonnel,
    // SearchUserList
  },
  directives: { waves },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      dictOptions: null,
      listQuery: {
        dictGroupCode: 'flow_default_handle_user',
        parentDictId: null,
        withChildren: true
      },
      temp: {
        dictId: null,
        dictGroupCode: '864',
        dictCode: null,
        dictValue: null,
        memo: null,
        sequence: 1,
        parentDictId: null,
        propertyList: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      SearchPersonnelData: {
        dialogVisible: false
      },
      SearchUserListData: {
        dialogVisible: false
      },
      rules: {}
    }
  },
  created() {
    this.showDictGroupList()
  },
  methods: {
    handleDictGroupCodeChange(value) {
      this.showParentDictList()
      //   this.handleFilter()
    },
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      this.listLoading = true
      listDict(this.listQuery).then((response) => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    showDictGroupList() {
      listDictItem({
        dictGroupCode: 'flow_default_handle_user',
        parentDictId: 0,
        withChildren: true
      }).then((res) => {
        this.dictOptions = res.data
      })
    },
    showParentDictList() {
      listDictItem(this.listQuery).then((res) => {
        this.list = res.data
      })
    },
    resetTemp() {
      this.temp = {
        dictId: null,
        dictGroupCode: this.listQuery.dictGroupCode,
        dictCode: null,
        dictValue: null,
        memo: null,
        sequence: 1,
        parentDictId: null,
        propertyList: []
      }
    },
    clearParentDictCascader() {
      this.selectedParentDictId.length = 0
      ++this.isParentDictCascaderShow
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = {
            dictGroupCode: 'flow_default_handle_user',
            dictCode: this.temp.reviewId,
            dictValue: this.temp.reviewName[0].userName,
            parentDictId: this.temp.dictId
          }
          saveDict(data).then((res) => {
            this.dialogFormVisible = false
            this.$message.success('添加成功')
            this.showParentDictList()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },

    openReview(val, type, title, temp) {
      // 0为角色 1为角色（总经理，总监） 3为架构 4为架构多选 5部门多选
      if (val == 3) {
        this.SearchPersonnelData = {
          dialogVisible: true
        }
      } else if (val == 4) {
        this.SearchUserListData = {
          dialogVisible: true
        }
      }
    },
    dataListData(data) {
      if (data) {
        const dataList = []
        data.forEach((res) => {
          dataList.push({ userName: res.label })
        })

        this.temp.dictValue = data[0].label
        this.temp.dictCode = data[0].id

        this.temp.reviewName = dataList
        this.temp.reviewId = data[0].id
        console.log(data,'7777777');
        this.$forceUpdate()
      }
    },
    SearchUserList(data) {
      const newData = []
      const idList = []
      data.map((item, index) => {
        idList.push(item.id)
        newData.push({
          id: item.id,
          userName: item.label
        })
      })
      this.reviewUserId = idList
      this.temp.reviewName = newData
      this.$forceUpdate()
    },
    deleteRow(row) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDict({
          dictId: row.dictId
        }).then((response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.showParentDictList()
        })
      })
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
